<template>
  <v-chart :option="option" autoresize :loading="load" class="pack"/>
</template>

<script>
import {ref, defineComponent} from "vue";
import * as echarts from 'echarts'
//重庆地图json数据
import uploadedData from "@/assets/json/data-1560850821493-6FG9jqvQH.geoJson.json"

export default defineComponent({
  name: "MapToYu",
  data(){
    let load =false
    let colors = [
      ["#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809", "#FB95D5", "#BDA29A", "#6E7074", "#546570", "#C4CCD3"],
      ["#37A2DA", "#67E0E3", "#32C5E9", "#9FE6B8", "#FFDB5C", "#FF9F7F", "#FB7293", "#E062AE", "#E690D1", "#E7BCF3", "#9D96F5", "#8378EA", "#8378EA"],
      ["#DD6B66", "#759AA0", "#E69D87", "#8DC1A9", "#EA7E53", "#EEDD78", "#73A373", "#73B9BC", "#7289AB", "#91CA8C", "#F49F42"],
    ];
    let colorIndex = 0;
    function randomNum(minNum, maxNum) {
      let res = null;
      switch (arguments.length) {
        case 1:
          res = parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          res=  parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          res =  0;
          break;
      }
      return res;
    }
    function setOption(dataSet){
      let geoCoordMap = {
        '北碚': [106.50,29.81],
        '城口': [108.6520475,31.90676506],
        '大足': [105.7692868,29.65392091],
        '垫江': [107.4004904,30.24903189],
        '丰都': [107.7461781,29.91492542],
        '奉节': [109.3758974,30.98202119],
        '合川': [106.2833096,30.09766756],
        '江北': [106.6214893,29.64821182],
        '江津': [106.2647885,28.98483627],
        '开州': [108.1818518,31.29466521],
        '南岸': [106.6379653,29.47704825],
        '南川': [107.1406799,29.12047319],
        '彭水': [108.2573507,29.36444557],
        '綦南': [106.8036647,28.96872774],
        '黔江': [108.7559876,29.44290625],
        '石柱': [108.2438988,30.07512144],
        '市区': [106.4377397,29.52648606],
        '铜梁': [106.0616035,29.81036286],
        '潼南': [105.8116920, 30.13795513],
        '万州': [108.0828876,30.73353669],
        '巫山': [109.8779184,31.09568937],
        '巫溪': [109.2970739,31.48090521],
        '武隆': [107.6831317,29.36831708],
        '秀山': [108.9997005,28.49462861],
        '永川': [105.8347961,29.41042605],
        '酉阳': [108.7911679,28.88330557],
        '云阳': [108.7533957,30.96025875],
        '长寿': [107.24,29.95],
        '忠县': [107.9279014,30.33522658],
        '川东': [107.3488646,29.68233099]
      };
      let voltageLevel = ["全部", "35kV", "110kV", "220kV", "500kV"];
      let mapData = [
        [], [], [], [], [], [], [],[], [], [], [],[], [], [], [],
        [], [], [], [], [], [], [], [], [],
        [], [], [], [], [], [], [], [], [], [], [], []
      ];
      /*柱子Y名称*/
      let categoryData = [];
      let barData = [];
      for (var key in geoCoordMap) {
        categoryData.push(key);
        mapData[0].push({
          "year": 2014,
          "name": key,
          "value": randomNum(100, 300)
        });
        mapData[1].push({
          "year": 2015,
          "name": key,
          "value": randomNum(100, 300)
        });
        mapData[2].push({
          "year": 2016,
          "name": key,
          "value": randomNum(100, 300)
        });
        mapData[3].push({
          "year": 2017,
          "name": key,
          "value": randomNum(100, 300)
        });
        mapData[4].push({
          "year": 2018,
          "name": key,
          "value": randomNum(100, 300)
        });
        mapData[5].push({
          "year": 2019,
          "name": key,
          "value": randomNum(100, 300)
        });
      }
      for (var i = 0; i < mapData.length; i++) {
        barData.push([]);
        for (var j = 0; j < mapData[i].length; j++) {
          barData[i].push(mapData[i][j].value)
        }
      }
      //请求地图json数据后进行数据设置
      function optionGet(geoJson=dataSet){
        echarts.registerMap('xianyang3', geoJson);
        let convertData = function(data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              });
            }
          }
          return res;
        };
        let convertToLineData = function(data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMap[dataItem.name];
            var toCoord = [106.55, 29.57]; //市区
            if (fromCoord && toCoord) {
              res.push([{
                coord: fromCoord,
                value: dataItem.value
              }, {
                coord: toCoord,
              }]);
            }
          }
          return res;
        };
        let optionXyMap01 = {
          timeline: {
            data: voltageLevel,
            axisType: 'category',
            autoPlay: true,
            playInterval: 3000,
            left: '10%',
            right: '21%',
            bottom: '3%',
            width: '80%',
            //  height: null,
            label: {
              normal: {
                textStyle: {
                  color: '#ddd'
                }
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            symbolSize: 10,
            lineStyle: {
              color: '#555'
            },
            checkpointStyle: {
              borderColor: '#777',
              borderWidth: 2
            },
            controlStyle: {
              showNextBtn: true,
              showPrevBtn: true,
              normal: {
                color: '#666',
                borderColor: '#666'
              },
              emphasis: {
                color: '#aaa',
                borderColor: '#aaa'
              }
            },

          },
          baseOption: {
            animation: true,
            animationDuration: 1000,
            animationEasing: 'cubicInOut',
            animationDurationUpdate: 1000,
            animationEasingUpdate: 'cubicInOut',
            grid: {
              right: '3%',
              top: '9%',
              bottom: '10%',
              width: '20%'
            },
            tooltip: {
              trigger: 'axis', // hover触发器
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                shadowStyle: {
                  color: 'rgba(150,150,150,0.1)' //hover颜色
                }
              }
            },
            geo: {
              show: true,
              map: 'xianyang3',
              roam: true,
              zoom: 1,
              center: [108.5, 30],  //中心点
              label: {
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  borderColor: 'rgba(147, 235, 248, 1)',
                  borderWidth: 1,
                  areaColor: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [{
                      offset: 0,
                      color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  // shadowColor: 'rgba(128, 217, 248, 1)',
                  // shadowColor: 'rgba(255, 255, 255, 1)',
                  // shadowOffsetX: -2,
                  // shadowOffsetY: 2,
                  // shadowBlur: 10
                },
                emphasis: {
                  areaColor: '#389BB7',
                  borderWidth: 0
                }
              }
            },
          },
          options: []

        };
        for (var n = 0; n < voltageLevel.length; n++) {
          optionXyMap01.options.push({
            backgroundColor: '#142037',
            title: [{
              text: '地图',
              left: 'center',
              textStyle: {
                color: '#fff'
              }
            },
              {
                id: 'statistic',
                text: voltageLevel[n] + "变电站统计情况",
                right: '1%',
                top: '3%',
                textStyle: {
                  color: '#fff',
                  fontSize: 20
                }
              }
            ],
            xAxis: {
              type: 'value',
              scale: true,
              position: 'top',
              min: 0,
              boundaryGap: false,
              splitLine: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                margin: 2,
                textStyle: {
                  color: '#aaa'
                }
              },
            },
            yAxis: {
              type: 'category',
              //  name: 'TOP 20',
              nameGap: 16,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#ddd'
                }
              },
              axisTick: {
                show: false,
                lineStyle: {
                  color: '#ddd'
                }
              },
              axisLabel: {
                interval: 0,
                textStyle: {
                  color: '#ddd'
                }
              },
              data: categoryData
            },
            series: [{
              //文字和标志
              name: 'light',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: convertData(mapData[n]),
              symbolSize: function(val) {
                return val[2] / 10;
              },
              // label: {
              //     normal: {
              //         formatter: '{b}',
              //         position: 'right',
              //         show: true
              //     },
              //     emphasis: {
              //         show: true
              //     }
              // },
              itemStyle: {
                normal: {
                  color: colors[colorIndex][n]
                }
              }
            },
              {
                type: 'map',
                map: 'xianyang3',
                geoIndex: 0,
                aspectScale: 0.75, //长宽比
                showLegendSymbol: false, // 存在legend时显示
                label: {
                  normal: {
                    show: false
                  },
                  emphasis: {
                    show: false,
                    textStyle: {
                      color: '#fff'
                    }
                  }
                },
                roam: true,
                itemStyle: {
                  normal: {
                    areaColor: '#031525',
                    borderColor: '#FFFFFF',
                  },
                  emphasis: {
                    areaColor: '#2B91B7'
                  }
                },
                animation: false,
                data: mapData
              },
              {
                //  name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(mapData[n].sort(function(a, b) {
                  return b.value - a.value;
                }).slice(0, 20)),
                symbolSize: function(val) {
                  return val[2] / 100;
                },
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                  normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                  }
                },
                itemStyle: {
                  normal: {
                    color: colors[colorIndex][n],
                    shadowBlur: 5,
                    shadowColor: colors[colorIndex][n]
                  }
                },
                zlevel: 1
              },
              // {
              //     type: 'lines',
              //     zlevel: 2,
              //     effect: {
              //         show: true,
              //         period: 4, //箭头指向速度，值越小速度越快
              //         trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
              //         symbol: 'arrow', //箭头图标
              //         symbolSize: 2, //图标大小
              //     },
              //     lineStyle: {
              //         normal: {
              //             color: colors[colorIndex][n],
              //             width: 1, //尾迹线条宽度
              //             opacity: 1, //尾迹线条透明度
              //             curveness: .3 //尾迹线条曲直度
              //         }
              //     },
              //     data: convertToLineData(mapData[n])
              // },
              {
                zlevel: 1.5,
                type: 'bar',
                symbol: 'none',
                itemStyle: {
                  normal: {
                    color: colors[colorIndex][n]
                  }
                },
                data: barData[n]
              }
            ]
          })
        }
        return optionXyMap01
      }
      return optionGet(dataSet)
    }
    return{
      load: ref(load),
      option: ref(setOption(uploadedData)),
    }
  },

})
</script>

<style scoped>

</style>